<!--
 * @Author: your name
 * @Date: 2020-08-22 01:51:42
 * @LastEditTime: 2020-08-27 19:50:19
 * @LastEditors: 王娆
 * @Description: In User Settings Edit
 * @FilePath: \exam-list\src\components\checkpaper\PaperDetail.vue
-->
<template>
<!--添加用户 -->
<div class="adduser">
  <el-card>
    <h3>添加用户</h3>
    <ul>
      <li>
        <el-tabs v-model="activeName">
          <el-tab-pane label="添加用户" name="first">
            <el-form :model="ruleForm" ref="ruleForm">
              <el-form-item prop="user_name">
                <el-input type="text" v-model="ruleForm.user_name" autocomplete="off" placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item prop="user_pwd">
                <el-input type="text" v-model="ruleForm.user_pwd" autocomplete="off" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item>
                <el-select v-model="value" placeholder="请选择身份id" @change='cnm'>
                  <el-option v-for="item in Identity" :key="item.identity_id" :value="item.identity_id" :label="item.identity_text">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="btns">
                <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="更新用户" name="second">
            <el-form :model="userInfo" ref="userInfo">
              <el-form-item>
                <el-select v-model="values" placeholder="请选择身份id" @change='chang'>
                  <el-option v-for="item in updata" :key="item.user_id" :value="item.user_id" :label="item.user_name">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="user_name">
                <el-input type="text" v-model="userInfo.user_name" autocomplete="off" placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item prop="user_pwd">
                <el-input type="text" v-model="userInfo.user_pwd" autocomplete="off" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item>
                <el-select v-model="valuess" placeholder="请选择身份id" @change='changes'>
                  <el-option v-for="item in Identity" :key="item.identity_id" :value="item.identity_id" :label="item.identity_text">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="btns">
                <el-button type="primary" @click="upsubmit">确定</el-button>
                <el-button @click="resetForm('userInfo')">重置</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </li>
      <li>
        <p class="top">添加身份</p>
        <el-form>
          <el-form-item>
            <el-input type="text" v-model="userId" autocomplete="off" placeholder="请输入身份名称"></el-input>
          </el-form-item>
          <el-form-item class="btns">
            <el-button type="primary" @click="userIdsubmit">确定</el-button>
            <el-button @click="usereset">重置</el-button>
          </el-form-item>
        </el-form>
      </li>
      <li>
        <p class="top">添加接口权限</p>
        <el-form :model="authorityView" ref="authorityView">
          <el-form-item prop="api_authority_text">
            <el-input type="text" v-model="authorityView.api_authority_text" autocomplete="off" placeholder="请输入api接口权限名称"></el-input>
          </el-form-item>
          <el-form-item prop="api_authority_url">
            <el-input type="text" v-model="authorityView.api_authority_url" autocomplete="off" placeholder="请输入api接口权限url"></el-input>
          </el-form-item>
          <el-form-item prop="api_authority_method">
            <el-input type="text" v-model="authorityView.api_authority_method" autocomplete="off" placeholder="请输入api接口权限方法"></el-input>
          </el-form-item>
          <el-form-item class="btns">
            <el-button type="primary" @click="apisubmit">确定</el-button>
            <el-button @click="apireset('authorityView')">重置</el-button>
          </el-form-item>
        </el-form>
      </li>
      <li>
        <p class="top">添加视图接口权限</p>
        <el-form>
          <el-form-item>
            <el-select placeholder="请选择已有视图" v-model="valuesss">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="btns">
            <el-button type="primary">确定</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>
      </li>
      <li>
        <p class="top">给身份设置api接口权限</p>
        <el-form>
          <el-form-item>
            <el-select placeholder="请选择身份id" v-model="valuesss">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select placeholder="请选择api接口权限" v-model="valuesss">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="btns">
            <el-button type="primary">确定</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>
      </li>
      <li>
        <p class="top">给身份设置视图权限</p>
        <el-form>
          <el-form-item>
            <el-select placeholder="请选择身份id" v-model="valuesss">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-form-item>
              <el-select placeholder="请选择视图权限id" v-model="valuesss">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form-item>
          <el-form-item class="btns">
            <el-button type="primary">确定</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>
      </li>
    </ul>
  </el-card>
</div>
</template>

<script>
import {
  mapMutations,
  mapState,
  mapActions
} from 'vuex'
export default {
  data() {
    return {
      activeName: 'first',
      ruleForm: {
        user_name: '',
        user_pwd: '',
        identity_id: ''
      },
      value: '',
      values: '',
      valuess: '',
      userInfo: {
        user_id: "",
        user_name: "",
        user_pwd: "",
        identity_id: "",
      },
      userId: '',
      authorityView: {
        api_authority_text: '',
        api_authority_url: '',
        api_authority_method: ''
      },
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }],
      valuesss: ''
    }
  },
  computed: {
    ...mapState('addUser', ['Identity', 'updata']),
  },
  methods: {
    ...mapMutations('addUser', ['addUser']),
    ...mapActions('addUser', ['getuser', 'getIdentity', 'setupdatauser', 'getupdata', 'adduser', 'addauthorityView']),
    submitForm() {
      //添加用户
      this.getuser(this.ruleForm)
    },
    upsubmit() {
      //更新用户
      this.setupdatauser(this.userInfo)
    },
    //添加用户
    apisubmit() {
      this.addauthorityView(this.authorityView)
    },
    //添加接口权限
    userIdsubmit() {
      this.adduser(this.userId)
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    apireset(authorityView) {
      this.$refs.authorityView.resetFields();
    },
    usereset() {
      this.userId = ''
    },
    cnm() {
      this.ruleForm.identity_id = this.value
      console.log(this.ruleForm.identity_id)
    },
    chang() {
      this.userInfo.user_id = this.values
    },
    changes() {
      console.log(this.value2)
      this.userInfo.identity_id = this.valuess
    },

  },
  created() {
    this.getIdentity()
    this.getupdata()
  },
}
</script>

<style scoped>
.adduser {
  width: 100%;
  background: pink;
}

ul {
  padding: 10px 10px;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ADAAAA;
}

li {
  flex: 0 0 33.3%;
  height: auto;
  box-sizing: border-box;
  border: 1px solid #000;
}

.btns {
  display: flex;
  justify-content: flex-end;
}

.top {
  width: 200px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border: 1px solid blue;
  color: blue;
  margin-left: 20px;
}
</style>
